<template>
  <!-- 培训管理 -->
  <div v-loading="loading" class="gl_pb_20">
    <div class="gl_my_15">
      <el-input v-model="api_GET_TrainEntryApprovalsQO.Filter" style="width:20%" suffix-icon="el-icon-search" clearable placeholder="搜索" size="mini" @change="getMessageList()" />
    </div>
    <div v-if="tableData.length > 0">
      <el-table size="mini" class="notice_table" :data="tableData">
        <el-table-column label="序号" type="index" width="50" />
        <el-table-column prop="name" label="培训名称">
          <template slot-scope="{row}">
            <span class="title" @click="changeRoute(row)">{{ row.trainning.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="培训时间" width="200">
          <template slot-scope="{row}">
            <span>{{ row.trainning.startTime ? row.trainning.startTime.slice(0, 10) : '-' }} 至 {{ row.trainning.endTime ? row.trainning.endTime.slice(0, 10) : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="培训地点"
          :tooltip="true"
          width="240"
        >
          <template slot-scope="{row}">
            <el-popover
              placement="top"
              width="400"
              trigger="hover"
              :open-delay="400"
              :content="row.trainning.address"
            >
              <div slot="reference" class="gl_ellipsis">{{ row.trainning.address || '--' }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="详情" width="170">
          <template slot-scope="{row}">
            <el-button :loading="downloadLoading" type="text" @click="checkCard('ExamCertificate', row)">查看参训证</el-button>
            <el-button v-if="row.hasExamResult" type="text" @click="detail(row)">成绩查询</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-else class="gl_noData">
      <p>暂无数据</p>
    </div>
    <el-row class="gl_pt_20" style="text-align: center;">
      <el-pagination
        :current-page="api_GET_TrainEntryApprovalsQO.Page"
        :page-size="api_GET_TrainEntryApprovalsQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
  </div>
</template>
<script>
import { api_GET_TrainTrainningEntryApprovalTrainningEntryApprovals } from '@/extend/api/trainswaggerApi/app.js';
import { Api_GET_TrainTrainningEntryApprovalTrainningEntryApprovalsQO } from '@/lib/form/train/swaggerForm';
import { api_GET_DownLoadFileAddHeader } from '@/extend/api/file';
import { errorText } from '@/lib';
import { mapState } from 'vuex';

export default {
  data() {
    return {
      api_GET_TrainEntryApprovalsQO: new Api_GET_TrainTrainningEntryApprovalTrainningEntryApprovalsQO(),
      loading: false,
      downloadLoading: false,
      totalPage: 0,
      tableData: []
    };
  },
  computed: {
    ...mapState({
      currentUserType: state => state.user.currentUserType
    })
  },
  watch: {
    'currentUserType': {
      handler: function(val) {
        if (!val) return;
        this.getMessageList();
      },
      immediate: true
    }
  },
  created() {
    if (this.currentUserType) {
      this.getMessageList();
    }
  },
  methods: {
    getMessageList(page) {
      if (!(this.currentUserType && this.currentUserType.registerId)) return;
      this.loading = true;
      this.api_GET_TrainEntryApprovalsQO.RegisterId = this.currentUserType.registerId;
      this.api_GET_TrainEntryApprovalsQO.IncludeTrainning = true;
      this.api_GET_TrainEntryApprovalsQO.IncludeNotApproved = false;

      this.api_GET_TrainEntryApprovalsQO.Page = page || 1;
      this.api_GET_TrainEntryApprovalsQO.SkipCount = (this.api_GET_TrainEntryApprovalsQO.Page - 1) * this.api_GET_TrainEntryApprovalsQO.MaxResultCount;
      api_GET_TrainTrainningEntryApprovalTrainningEntryApprovals(this.api_GET_TrainEntryApprovalsQO).then(res => {
        this.tableData = res.items;
        this.totalPage = res.totalCount;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    // 点击赛事标题进行路由跳转
    changeRoute(row) {
      var a = document.createElement('a');
      var event = new MouseEvent('click');
      a.href = `${location.origin}/train.html#/home/${row.trainning.route + (row.trainning.tenantId ? '_' + row.trainning.tenantId : '')}/info`;
      a.target = '_blank';
      a.dispatchEvent(event);
    },
    // 查看详情
    detail(row) {
      const { query } = this.$route;
      query.trainningId = row.trainningId;
      query.registerId = row.registerId;
      this.$router.push({
        path: '/myCenter/trainning/detail',
        query: query
      });
    },
    // 生成PDF
    checkCard(ContestResults, row) {
      var _this = this;
      const reportVO = {};
      // TODO
      reportVO.reportName = ContestResults;
      reportVO.format = 'PDF';
      reportVO.TrainningId = row.trainningId;
      reportVO.registerId = row.registerId;
      reportVO.ExportAll = false;
      reportVO.FileDownloadName = row.name + '参训证' + '.pdf';

      const fileName = row.name + '参训证' + '.pdf';
      const tempUrl = `/api/app/Train/report/entryCards`;
      api_GET_DownLoadFileAddHeader(tempUrl, fileName, reportVO, WEB_CONFIG.VUE_APP_SWAGGER_TRAIN_BASE).then(res => {
        _this.downloadLoading = false;
      }).catch(error => {
        _this.downloadLoading = false;
        errorText(error).then(function(text) {
          _this.$message({ type: 'error', message: text });
        });
      });
    },
    // 分页
    sizeChange(MaxResultCount) {
      this.api_GET_TrainEntryApprovalsQO.MaxResultCount = MaxResultCount;
      this.getMessageList();
    },
    pageIndexChange(currentPage) {
      this.getMessageList(currentPage);
    }
  }
};
</script>
<style scoped>
.el-table {
  border: none;
}
.el-table::before {
  background-color: #ffffff;
}
.el-table /deep/ th{
  border-right: none;
  background: #ffffff;
}
.el-table /deep/ thead th{
  background: #ffffff;
}
.el-table /deep/ td {
  border-right: none;
  font-size: 14px;
}
.title {
  cursor: pointer;
}
.title:hover{
  color: #1890ff;
  text-decoration: underline;
}
.notice_table {
  border-top: 1px solid #dfe6ec;
  border-right: none !important;
}
</style>
